import { useRef, useLayoutEffect } from 'react'

// useLayoutEffect 用于做一些同步的操作
// 它跟 useEffect 的区别
// useLayoutEffect                         useEffect 
// 1. 它是在浏览器绘制之前执行的             1. 它是在浏览器绘制之后执行的
// 2. 同步执行                              2. 异步执行
// 3. 阻塞DOM渲染                           3. 不阻塞DOM渲染

/**
 * 记录列表滚动位置
 */
export const RecordScrollPosition = () => {

    const containerRef = useRef<HTMLDivElement>(null)
    const list = Array.from({length: 1000}, (_, i) => i + 1)

    useLayoutEffect(() => {
        const container = containerRef.current!
        container.scrollTop = Number(new URLSearchParams(window.location.search).get('scrollTop') || 0)
    }, [])

    const scrollHandler = (e: React.UIEvent<HTMLDivElement>) => {
        const target = e.target as HTMLDivElement
        window.history.replaceState({}, '', `?scrollTop=${target.scrollTop}`)
    }

    return (
        <>
            <div onScroll={scrollHandler} ref={containerRef} style={{height: '500px', overflow: 'auto'}}>
                {list.map(item => (
                    <div key={item}>{item}</div>
                ))}
            </div>
        </>
    )

}
